<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<div>
	<a href="#nowhere"><img class="logo" src="http://how2j.cn/tmall/img/site/logo.gif" id="logo">
	</a>
		<div class="searchDiv">
			<input type="text" placeholder="时尚男鞋  太阳镜" name="keyword">
			<button class="searchButton" type="submit">搜索</button>
			<div class="searchBelow">
				<span>
					<a href="#nowhere">平衡车</a>
					<span>|</span>
				</span>
				<span>
					<a href="#nowhere">扫地机器人</a>
					<span>|</span>
				</span>
				
				<span>
					<a href="#nowhere">原汁机</a>
					<span>|</span>
				</span>
				<span>
					<a href="#nowhere">冰箱</a>
				</span>
			</div>
		</div>
</div>
<div style="height: 50px;"></div>
<style type="text/css">
	div.searchDiv{/*搜索栏*/
		background-color: #C40000;/*背景色是天猫红*/
		width: 400px;/*宽度*/
		margin: 50px auto;/*水平居中，并且有50px的上下外边距*/
		padding: 1px;/*内边距*/
		height: 40px;/*高度*/
		display: block;/*以块状元素显示，只有在以块状元素显示的时候,水平居中才有效果。当然div默认也是块状元素显示的*/
	}
	div.searchDiv input{/*搜索栏中的输入框*/
		width: 275px;
		border: 1px solid transparent;/*边框设置成透明的，否则会有边框阴影*/
		height: 36px;
		margin: 1px;/*外边距*/
		outline: none;/*去掉输入框轮廓，否则获取焦点的时候会发生颜色变化*/
	}
	div.searchDiv button{/*搜索栏按钮*/
		width: 110px;/*宽度110px,这样加上左边的input的275px的宽度，正好把searchDiv填满*/
		border: 1px solid transparent;
		background-color: #C40000;
		color: white;
		font-size: 20px;
		font-weight: bold;/*字体加粗*/
	}
	div.searchBelow{/*搜索栏下方的关键字*/
		margin-top: 3px;/*搜索栏下方的div，有3个像素的上外边距*/
		margin-left: -20px; /*-20个像素的左外边距*/
	}
	div.searchBelow a{
		padding: 0px 20px 0px 20px;
		font-size: 14px;
	}
	img.logo{
		position: absolute;/*绝对定位*/
		left: 0px;/*贴在左边*/
		top: 30px;/*距离上面30px*/
		z-index: -1;/*-1表示放在下面，免得图片挡住了输入框*/
	}
	body{
		font-size: 12px;
		font-family: Arial;
	}
	a{
		color: #999;/*所有超链的颜色*/
	}
	a:hover{/*鼠标悬停*/
		text-decoration: none;/*超链鼠标悬停的时候,没有下划线*/
		color: #C40000;/*超链鼠标悬停的时候,使用天猫红显示*/
	}
</style>
